import React, { useState } from "react";
import { Form, Input, Button } from "antd-mobile";
import { loginApi } from '../../api'
import { useNavigate } from "react-router-dom";

function Index() {
const naviagte=useNavigate()
const onFinish=async(value)=>{
  const resp=await loginApi(value)
  const {code,data,message}=resp.data
  if(code===200){
    alert(message)
    localStorage.setItem('token',data.token)
    naviagte('/my')
  }else{
    alert(message)
  }
  
}
const [form]=Form.useForm()
const [disabled,setdisabled]=useState(true)

const homes=()=>{
  form
  .validateFields(['username'])
  .then(()=>{
    setdisabled(true)
  }).catch(()=>{
    setdisabled(false)
  })
}
  return (
    <div>
      <Form
      form={form}
      onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button block disabled={disabled} type="submit" color="primary" size="large">
            登录
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="账号"
          rules={[
            { required: true, message: "账号不能为空" },
            {
              pattern: /1[3-9]\d{9}$/,
              message: "请输入正确账号",
            },
          ]}
        >
          <Input onClick={()=>homes()} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <Input onChange={console.log}  placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
